import React, { Component } from "react";
import {
    Breadcrumb,
    Table,
    Card,
    Button,
    Space,
    Input,
    Select,
    Row,
    Modal,
} from "antd";
import {
    HomeOutlined,
    EditOutlined,
    DeleteOutlined,
    PlusOutlined,
} from "@ant-design/icons";

import axios from "axios";

const columns = [
    {
        title: "序号",
        dataIndex: "id",
    },
    {
        title: "姓名",
        dataIndex: "nickname",
    },
    {
        title: "理论成绩",
        dataIndex: "theory",
    },
    {
        title: "技能成绩",
        dataIndex: "skill",
    },
    {
        title: "操作",
        render: (text, record) => (
            <Space>
                <Button type="primary" size="small">
                    <EditOutlined />
                    编辑
                </Button>

                <Button type="primary" size="small" danger>
                    <DeleteOutlined />
                    删除
                </Button>
            </Space>
        ),
    },
];

export default class ScoreManage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            visible: false,
            studentList: [],
            theory: "",
            skill: "",
            uid: "",
        };
    }

    componentDidMount() {
        this.getList();
        this.getStudentList();
    }

    async getList() {
        const res = await axios.get("/scores");
        this.setState({ list: res.data.data });
    }

    async getStudentList() {
        const res = await axios.get("/users/student");
        this.setState({ studentList: res.data.data });
    }

    async handleOk() {
        // 非空校验
        // 发送请求
        console.log("this.state", this.state);
        // const res = await axios.post("/scores");
    }

    render() {
        return (
            <div className="score-manage">
                <Breadcrumb>
                    <Breadcrumb.Item>
                        <HomeOutlined /> 首页
                    </Breadcrumb.Item>

                    <Breadcrumb.Item>
                        <a href="">成绩管理</a>
                    </Breadcrumb.Item>
                </Breadcrumb>

                <Card style={{ marginTop: "15px" }}>
                    <Row>
                        <Button
                            onClick={() => this.setState({ visible: true })}
                        >
                            <PlusOutlined /> 添加成绩
                        </Button>
                    </Row>

                    <Table
                        dataSource={this.state.list}
                        columns={columns}
                        rowKey={(record) => record.id}
                    />
                </Card>

                {/* 添加弹框 */}
                <Modal
                    title="添加成绩"
                    visible={this.state.visible}
                    onOk={this.handleOk.bind(this)}
                    okText="确定"
                    cancelText="取消"
                >
                    <Space direction="vertical" size="large" className="block">
                        <Input
                            placeholder="请输入理论成绩"
                            onChange={(e) =>
                                this.setState({ theory: e.target.value })
                            }
                        ></Input>
                        <Input
                            placeholder="请输入技能成绩"
                            onChange={(e) =>
                                this.setState({ skill: e.target.value })
                            }
                        ></Input>
                        <Select
                            placeholder="请选择学生"
                            className="block"
                            onChange={(val) => this.setState({ uid: val })}
                        >
                            {this.state.studentList.map((item) => (
                                <Select.Option
                                    key={item.id}
                                    value={item.id}
                                >{`${item.nickname} (${item.username})`}</Select.Option>
                            ))}
                        </Select>
                    </Space>
                </Modal>
            </div>
        );
    }
}
